<template>
  <div id="app">
    <div class="Left">
      <div class="table">
        <div class="top">
          <h1>{{ list.bottom_text }}</h1>
          <p class="time">{{ time }}</p>
        </div>
        <div class="Content">
          <div class="contentLeft">
            <div class="topLeft">
              <div class="table_top">
                <p>请以下考生到考场报到</p>
                <div class="sort list">
                  <!-- <div class="item">
                    <span class="tab">考官</span>
                  </div> -->
                  <div class="item">
                    <span class="tab">考场名称</span>
                  </div>
                  <div class="item">
                    <span class="tab">考场地址</span>
                  </div>
                  <div class="item">
                    <span class="tab">姓名/身份证尾号</span>
                  </div>
                </div>
              </div>
            </div>

            <template v-for="count in 2">
              <div class="showList">
                <p class="logo" :style="{ backgroundColor: count === 1 ? '#0de8cc' : '#ddc10a' }">
                  {{ count === 1 ? "理论考试" : "实操考试" }}
                </p>
                <div>
                  <div v-if="count === 1" class="itemList" style="height: 192px;">
                    <div class="detail" style="background-color: #d0dffe;">
                      <!-- <div class="item">
                        {{ theoryList.user_name ? theoryList.user_name : "" }}
                      </div> -->
                      <div class="item">
                        <p>{{  theoryList.name  ? theoryList.name : "" }}</p>
                      </div>
                      <div class="item">
                        <div>
							<p v-if="theoryList.floor">{{ theoryList.floor }}</p>
							<p>{{ theoryList.place }}</p>
						</div>
                      </div>
                      <div class="item marquee-colum1" :style="{
                        minHeight: '100px',
                      }">
                        <span ref="scollTop" style="display: flex;justify-content: flex-start;" >
						  <template v-for="(list, index) in theoryList.examinee_queue_hkz">
							<div style="height: 47.5px;line-height: 47.5px;white-space: nowrap;display: inline-block;width: 254px;text-align: left;font-size: 35px;padding: 0 8px;">
								{{ list.show_name ? list.show_name : ''}}
							</div>
						  </template>
                        </span>
						<!-- <div style="height:20px;"></div> -->
                      </div>
                    </div>
                  </div>

                  <template v-for="(el, index) in showList">
                    <div :key="el.id" v-if="count === 2" class="itemList">
                      <div class="detail" :class="(index) % 2 == 0 ? 'white' : 'blue'">
                        <!-- <div class="item">
                          {{ el.user_name ? el.user_name : "" }}
                        </div> -->
                        <div class="item">
                           <p>{{ el.name }}</p>
                        </div>
                        <div class="item">
                          <div>
							  <p>{{  el.floor }}</p>
							  <p v-if="el.place">{{  el.place }}</p>
						  </div>
                        </div>
                        <div class="item marquee-colum">
						  <span ref="scollTop" style="display: flex;justify-content: flex-start;" >
						    <template v-for="item in el.examinee_queue_hkz">
						  	<div style="height: 46px;line-height: 46px;white-space: nowrap;display: inline-block;
							width: 254px;text-align: left;font-size: 35px;padding: 0 8px;">
						  		{{ item.show_name ? item.show_name : ''}}
						  	</div>
						    </template>
							<!-- <div style="height:20px;"></div> -->
						  </span>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- <div class="mechine">
        <p>版本号:{{ v }}</p>
        <p>当前设备:{{ ip }}</p>
      </div> -->
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/dist/locale/zh-cn";
import request from "./request";
moment.locales();
export default {
  data() {
    return {
      time: "", //定义时间显示,
      list: [], //数据
      url: "", //服务器地址
      ip: "", //ip地址
      v: "", //版本号
      theoryList: {}, //理论列表
      showList: [],// 实操列表
      Datalength:5, //定义当前显示的位置
      timers: 0,//定义翻页的定时器
      pageSize: 5, //定义每页显示的数量
    };
  },
  mounted() {
    this.url = this.getQueryVariable("S_Ip")?this.getQueryVariable("S_Ip"):'175.6.58.185:10025'; //获取服务器地址
    this.ip = this.getQueryVariable("G_Ip") ? this.getQueryVariable("G_Ip") : '192.168.0.126'; //获取设备ip
    this.v = this.getQueryVariable("V"); //获取当前版本号
    console.log("url", this.url);
    console.log("ip", this.ip);
    console.log("v", this.v);
    this.timeHandle();
    this.listHandle();
    setInterval(() => {
      this.listHandle()
    }, 5000)
  },

  methods: {
    //获取当前时间
    timeHandle() {
      setInterval(() => {
        const time = moment().format("MM月DD日 HH:mm:ss");
        this.time = time;
      }, 1000);
    },
    //获取数据
    async listHandle() {
      // const { data: res } = await request({
      //   method: "get",
      //   url: "http://"+this.url+"/api/ad/area/queue?ip="+this.ip,
      // });

      // const { data: res } = await request({ method: 'get', url: '/api/ad/area/queue?ip=192.168.1.16' })
	  // http://${this.url}
      const { data: res } = await request({ method: 'get', url: `http://${this.url}/api/ad/area/queue?ip=${this.ip}` })
      const result = res.data;
      const loaclList = localStorage.getItem('data')
	  
	  let str = ""
	  if(result && result.room_list && result.room_list.length>0){
		   result.room_list.forEach((val) => {
			   str+=val.name
			   if(val.examinee_queue_hkz && val.examinee_queue_hkz.length>0){
				   val.examinee_queue_hkz.forEach((v) => {
					   str+=v.show_name
				   })
			   }
		   })
	  }
		// 判断当前的数据是否和之前的数据一样
	  if (loaclList && loaclList === str && this.showList.length>0) {
		return false
	  }
	  console.log(str)
      localStorage.setItem('data', str)
      //判断如果数据右边的，直接刷新页面
      // if (loaclList && loaclList != JSON.stringify(result)) {
      //   location.reload()
      // }
		
      this.list = result
      //重置理论考场数据
	  this.theoryList={}
	  //重置实操考场数据
	  this.showList = []
	  if(this.list&&this.list.room_list&&this.list.room_list.length>0){
		  let llData = this.list.room_list.filter((item) => { return item.is_lock == 1})
		  if(llData && llData.length>0){
			  this.theoryList = llData[0]
		  }
	  }
	  
      // 获取实操数据
      let newList = this.list.room_list.filter((item) => { return item.is_lock == 0})
      //去除掉没有数据的
      // let arr = []
      // newList.forEach((el, index) => {
      //   if (el.examinee_queue_hkz.length) {
      //     console.log(el);
      //     arr.push(el)
      //   }
      // })
      // newList = arr
      //判断当前数据量小于pageSize个，则取消翻页操作
      if (newList.length <= this.pageSize) {
        const length = (5 - newList.length)
        if (newList.length < 5) {
          for (var i = 0; i < length; i++) {
            newList.push({})
          }
        }
        this.showList = newList

      } else {
        //翻页
        clearInterval(this.timers);
        this.timers = setInterval(() => {
			newList = this.list.room_list.filter((item) => { return item.is_lock == 0})
			//多页删除后考场小于5个不滚动到下一页
			if (newList.length <= this.pageSize) {clearInterval(this.timers);return;}
          //判断一页之后的数量是否大于pageSize
          if (newList.length - this.Datalength <= this.pageSize) {
            //小于pageSize则直接全部放置在下一页
            this.showList = newList.slice(this.Datalength, newList.length)
			let len = this.showList.length
            //如果最后一页数量不足pageSize个，则自动填充空数据来填充背景色
            if (len < 5) {
              for (var i = 0; i < (5 - len); i++) {
                this.showList.push({})
              }
            }
            //到达最后一页将起始下标归为0
            this.Datalength = 0
          } else {
            //如果减去上一页的数量大于pageSize，则继续切割pageSize个
            this.showList = newList.slice(this.Datalength, this.Datalength + this.pageSize)
            this.Datalength += this.pageSize
          }
		  this.runcolum();
        }, 15000)
      }
	  this.showList = [...newList]
      this.runcolum();
      this.runcolum1()
    },
    //垂直滚动 --- 就是添加滚动效果
    runcolum() {
      this.$nextTick(() => {
        // $(".marquee-colum").each((index, el) => {
        //   $(el).liMarquee("destroy");
        // })
        setTimeout(() => {
          // $(".marquee-colum").liMarquee("destroy");
          $(".marquee-colum").each((index, el) => {
            $(el).liMarquee({
              direction: "up",
              scrollamount: 10,
              runshort: false,
              circular: true,
            });
          });
		  setTimeout(() => {
			  $(".marquee-colum").each((index, el) => {
				  this.showList.forEach((val,idx) => {
					  if(index == idx){
						  //超出数量才重置，少于这个数量垂直居中
						  if(val.examinee_queue_hkz&&val.examinee_queue_hkz.length>10){
							  $(el).find('.str_move').css("top", "0");//重置元素
						  }
					  }
				  })
				$(el).liMarquee('update')
			  });
			 this.$forceUpdate()
		  },5)
        }, 50);
      })

    },
    runcolum1() {
		this.$nextTick(() => {
			setTimeout(() => {
				$('.marquee-colum1').each((index, el) => {
					$(el).liMarquee({
						direction: 'up',
						scrollamount: 10,
						runshort: false,
						circular: true,
					});
				});
				setTimeout(() => {
					$(".marquee-colum1").each((index, el) => {
						//超出数量才重置，少于这个数量垂直居中
						if(this.theoryList&&this.theoryList.examinee_queue_hkz&&this.theoryList.examinee_queue_hkz.length>15){
							$(el).find('.str_move').css("top", "0");
						}
						$(el).liMarquee('update')
					});
					//强制刷新页面
					this.$forceUpdate()
				},5)
			}, 50)
		})

    },
    //判断高度是否溢出，溢出才垂直滚动，否则垂直水平居中
    // changeTextState() {
    //   setTimeout(() => {
    //     //获取所有需要滚动的外层父元素
    //     const parentColum = this.$refs["parentColum"];
    //     //获取所有需要滚动的元素
    //     const scollTop = this.$refs.scollTop;
    //     if (scollTop) {
    //       scollTop.forEach((el, index) => {
    //         //判断元素内容是否超出，未超出则给固定高度，取消滚动
    //         let parentLength = parentColum[index];
    //         if (parentLength) parentLength = parentLength.clientHeight;
    //         // if (parentLength > el.clientHeight) {
    //         //   el.parentNode.style.height = parentLength + "px";
    //         // }
    //       });
    //     }
    //   }, 50);
    // },

    //获取url指定参数
    getQueryVariable(name) {
      let url = window.location.href;
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(url) || [
            ,
            "",
          ])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
  },
};
</script>

<style lang="scss">
#app {
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .Left {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;

    .table {
      .top {
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        background-color: #1a53e2;
        color: rgb(238, 238, 238);
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;

        h1 {
          font-size: 38px;
		  padding-left: 32px;
        }

        .time {
          font-size: 40px;
        }
      }

      .Content {
        box-sizing: border-box;
        padding: 5px;
        // padding-bottom: 20px;
        background-color: #0d77fe;
        display: flex;
        width: 100%;

        h1 {
          color: white;
          text-align: center;
          margin-bottom: 20px;
        }

        .tab {
			width: 100%;
          height: 50px;
          line-height: 50px;
          color: #2b5ddd;
          background: white;
          text-align: center;
          font-size: 29px;
          border-radius: 8px 8px 0 0px;
        }

        .contentLeft {
          width: 100%;

          .topLeft {
            width: 100%;
            display: flex;
          }

          .list {
            display: flex;
          }
		 
		  // .detail .item.marquee-colum1{
			 //  &:nth-child(3n) {
				// background-color: #F3CF91;
			 //  }
		  // }
		  // .detail.blue .item.marquee-colum{
			 //  &:nth-child(3n) {
				// background-color: #F3CF91;
			 //  }
		  // }
		  // .detail.white .item.marquee-colum{
			 //  &:nth-child(3n) {
			 //  	background-color: #F2F0B7;
			 //  }
		  // }
		  
          .item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;

            font-size: 38px;

            // &:nth-child(1) {
            //   width: 200px;
            // }

            &:nth-child(1) {
              width: 300px;
			  border-right: 5px solid #255CE2;
            }

            &:nth-child(2) {
			  text-align: center;
              width: 200px;
			  border-right: 5px solid #255CE2;
            }

            &:nth-child(3n) {
              flex:1;
            }

            p {
              display: inline-block;
              padding: 0 5px;
            }

            span {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              height: 100%;
            }
          }

          .table_top {
            width: 100%;
            background-color: #255ce2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 39px;
            margin-right: 5px;
			p{
				text-align: center;
				font-size: 37px;
				font-weight: bold;
				color: #fff;
				margin-left: 500px;
				padding: 8px 0;
			}
            .sort {
              display: flex;
              width: 100%;
            }
          }

          .showList {
            width: 100%;
            display: flex;
            box-sizing: border-box;
            font-size: 18px;
            margin-bottom: 5px;
			margin-top: -1px;

            &:last-child {
              height: 693px;
              overflow: hidden;
              /* Firefox */
            }

            >div {
              width: 100%;
              display: flex;
              flex-direction: column;

              .itemList {
                width: 100%;
                display: flex;
                min-height: 139px;
				overflow: hidden;
              }
            }

            .showRight {
              display: flex;
              flex-direction: column;
              flex: 1;
              height: initial;
              justify-content: center;
              align-items: center;
              padding: 5px;
              font-size: 38px;

              background-color: white;

              p {
                // margin: 0 0 0 100px;
                height: 55px;
                text-align: left !important;
              }

              span {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                line-height: 1;
                height: 100%;
              }
            }

            .logo {
              text-align: center;
              width: 40px;
              line-height: 36px;
              font-size: 28px;
              color: white;
              min-height: 100%;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
			  border-radius: 8px 0 0 8px;
			  font-weight: bold;
            }

            .detail {
              box-sizing: border-box;
              display: flex;
              width: 100%;
              margin-right: 5px;
            }
			.detail.blue{
				background-color: #d0dffe; 
			}
			.detail.white{
				background-color: white; 
			}
          }
        }

        .contentRight {
          width: 369.34px;

          .waitMessage {
            padding-top: 2px;
            text-align: center;
            background-color: #e4c10d;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
	
.marquee-colum,
.marquee-colum1 {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.marquee-colum .str_move,
.marquee-colum1 .str_move {
  width: 100%;
  position: absolute;
}

.mechine {
  position: absolute;
  display: flex;
  bottom: 2px;
  right: 10px;
  color: white;
  font-size: 16px;

  p {
    margin: 0 10px;
  }
}
</style>
